<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分类商品</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background-color: #f5f5f5;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .header {
            background-color: white;
            padding: 15px 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        .breadcrumb {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 20px;
            color: #666;
        }

        .breadcrumb a {
            color: #666;
            text-decoration: none;
        }

        .breadcrumb a:hover {
            color: #ffd700;
        }

        .breadcrumb i {
            font-size: 12px;
            color: #999;
        }

        .category-nav {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
            background: white;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .category-item {
            padding: 8px 16px;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s;
            color: #666;
        }

        .category-item:hover {
            background: #fff9e6;
            color: #ffd700;
        }

        .category-item.active {
            background: #ffd700;
            color: white;
        }

        .product-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }

        .product-card {
            background: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            transition: transform 0.3s;
            cursor: pointer;
        }

        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }

        .product-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }

        .product-info {
            padding: 15px;
        }

        .product-name {
            font-size: 16px;
            color: #333;
            margin-bottom: 10px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .product-price {
            color: #ff6b00;
            font-size: 18px;
            font-weight: bold;
        }

        .product-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 10px;
            color: #999;
            font-size: 12px;
        }

        .empty-state {
            text-align: center;
            padding: 40px;
            color: #666;
        }

        .empty-state i {
            font-size: 48px;
            color: #ddd;
            margin-bottom: 20px;
        }

        .filter-section {
            background: white;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .filter-row {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        .filter-row:last-child {
            margin-bottom: 0;
            padding-bottom: 0;
            border-bottom: none;
        }

        .filter-label {
            width: 80px;
            color: #999;
            flex-shrink: 0;
        }

        .filter-options {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .filter-option {
            padding: 4px 12px;
            border-radius: 15px;
            cursor: pointer;
            transition: all 0.3s;
            color: #666;
            background: #f5f5f5;
        }

        .filter-option:hover {
            background: #fff9e6;
            color: #ffd700;
        }

        .filter-option.active {
            background: #ffd700;
            color: white;
        }

        .sort-section {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            background: white;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }

        .sort-options {
            display: flex;
            gap: 20px;
        }

        .sort-option {
            color: #666;
            cursor: pointer;
            transition: color 0.3s;
        }

        .sort-option:hover {
            color: #ffd700;
        }

        .sort-option.active {
            color: #ffd700;
            font-weight: bold;
        }

        .total-count {
            color: #999;
        }

        /* 拍卖商品卡片样式 */
        .product-card.auction {
            position: relative;
        }

        .auction-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            padding: 4px 8px;
            border-radius: 4px;
            color: white;
            font-size: 12px;
            z-index: 1;
        }

        .auction-badge.upcoming {
            background-color: #4CAF50;
        }

        .auction-badge.ongoing {
            background-color: #ff6e30;
        }

        .auction-badge.ended {
            background-color: #999;
        }

        .auction-price {
            display: flex;
            align-items: baseline;
            gap: 4px;
            margin: 8px 0;
        }

        .auction-price .label {
            font-size: 12px;
            color: #666;
        }

        .auction-price .price {
            font-size: 18px;
            color: #ff6e30;
            font-weight: bold;
        }

        .auction-time {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 12px;
            color: #666;
        }

        /* 卖家信息样式 */
        .seller-info {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .seller-avatar {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            object-fit: cover;
        }

        .seller-info span {
            font-size: 12px;
            color: #666;
        }

        /* 商品状态信息样式 */
        .condition-info {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            color: #666;
        }

        .view-count {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .view-count i {
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="container">
            <div class="breadcrumb">
                <a href="home.html">首页</a>
                <i class="fas fa-chevron-right"></i>
                <span id="currentCategory">分类商品</span>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="filter-section">
            <div class="filter-row">
                <div class="filter-label">分类</div>
                <div class="filter-options" id="categoryOptions">
                    <!-- 分类选项将通过JavaScript动态生成 -->
                </div>
            </div>
            <div class="filter-row">
                <div class="filter-label">新旧程度</div>
                <div class="filter-options">
                    <div class="filter-option" data-condition="5">全新</div>
                    <div class="filter-option" data-condition="4">几乎全新</div>
                    <div class="filter-option" data-condition="3">轻微使用</div>
                    <div class="filter-option" data-condition="2">明显使用</div>
                    <div class="filter-option" data-condition="1">重度使用</div>
                </div>
            </div>
            <div class="filter-row">
                <div class="filter-label">价格区间</div>
                <div class="filter-options">
                    <div class="filter-option" data-price="0-100">0-100元</div>
                    <div class="filter-option" data-price="100-500">100-500元</div>
                    <div class="filter-option" data-price="500-1000">500-1000元</div>
                    <div class="filter-option" data-price="1000-5000">1000-5000元</div>
                    <div class="filter-option" data-price="5000-">5000元以上</div>
                </div>
            </div>
        </div>

        <div class="sort-section">
            <div class="sort-options">
                <div class="sort-option active" data-sort="default">默认排序</div>
                <div class="sort-option" data-sort="price-asc">价格从低到高</div>
                <div class="sort-option" data-sort="price-desc">价格从高到低</div>
                <div class="sort-option" data-sort="time">最新发布</div>
            </div>
            <div class="total-count">共 <span id="totalCount">0</span> 件商品</div>
        </div>

        <div class="product-grid" id="productGrid">
            <!-- 商品卡片将通过JavaScript动态生成 -->
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        // 当前筛选条件
        let currentFilters = {
            categoryPath: '',
            condition: '',
            priceRange: '',
            sort: 'default'
        };

        // 页面加载完成后执行
        $(document).ready(function() {
            // 获取URL参数
            const urlParams = new URLSearchParams(window.location.search);
            const categoryPath = urlParams.get('categoryPath');
            
            if (categoryPath) {
                currentFilters.categoryPath = categoryPath;
                loadCategoryBreadcrumb(categoryPath);
                loadSubCategories(categoryPath);
            }
            
            // 加载商品列表
            loadProducts();

            // 绑定筛选事件
            bindFilterEvents();
        });

        // 加载分类面包屑
        function loadCategoryBreadcrumb(categoryPath) {
            console.log('加载分类面包屑:', categoryPath);
            $.ajax({
                url: '/category/path',
                type: 'GET',
                data: { path: categoryPath },
                success: function(response) {
                    console.log(response);

                    if (response.state === 1) {
                        const categories = response.data;
                        let breadcrumb = '<a href="home.html">首页</a>';
                        let currentPath = '';
                        
                        categories.forEach((category, index) => {
                            currentPath += (index === 0 ? '' : '.') + category.id;
                            breadcrumb += '<i class="fas fa-chevron-right"></i>';
                            if (index === categories.length - 1) {
                                breadcrumb += `<span>${category.name}</span>`;
                            } else {
                                breadcrumb += `<a href="category.html?categoryPath=${currentPath}">${category.name}</a>`;
                            }
                        });
                        $('.breadcrumb').html(breadcrumb);
                        $('#currentCategory').text(categories[categories.length - 1]?.name || '分类商品');
                    }
                }
            });
        }

        // 加载子分类
        function loadSubCategories(categoryPath) {
            $.ajax({
                url: '/category/children',
                type: 'GET',
                data: { parentPath: categoryPath },
                success: function(response) {
                    if (response.state === 1) {
                        const categories = response.data;
                        // "全部"选项使用当前的categoryPath
                        let html = `<div class="filter-option active" data-category="${categoryPath}">全部</div>`;
                        categories.forEach(category => {
                            const subPath = categoryPath ? `${categoryPath}.${category.id}` : category.id.toString();
                            html += `<div class="filter-option" data-category="${subPath}">${category.name}</div>`;
                        });
                        $('#categoryOptions').html(html);
                    }
                }
            });
        }

        // 加载商品列表
        function loadProducts() {
            const queryParams = {
                categoryPath: currentFilters.categoryPath,
                condition: currentFilters.condition,
                priceRange: currentFilters.priceRange,
                sort: currentFilters.sort
            };

            // 解析价格区间
            if (queryParams.priceRange) {
                const [min, max] = queryParams.priceRange.split('-');
                queryParams.minPrice = min;
                queryParams.maxPrice = max || '999999';
                delete queryParams.priceRange;
            }

            $.ajax({
                url: '/product/filter',
                type: 'GET',
                data: queryParams,
                success: function(response) {
                    console.log(response);
                    if (response.state === 1) {
                        displayProducts(response.data);
                        $('#totalCount').text(response.data.length);
                    } else {
                        showEmptyState();
                    }
                },
                error: function() {
                    showEmptyState();
                }
            });
        }

        // 显示商品列表
        function displayProducts(products) {
            if (!products || products.length === 0) {
                showEmptyState();
                return;
            }

            const grid = $('#productGrid');
            grid.empty();

            products.forEach(product => {
                const mainImage = product.firstImage || 'default-product-image.jpg';
                let card;
                
                if (product.isAuction === 1) {
                    // 拍卖商品��片
                    const now = new Date();
                    const startTime = new Date(product.startTime);
                    const endTime = new Date(product.endTime);
                    
                    // 判断拍卖状态
                    let status, statusClass;
                    if (now < startTime) {
                        status = '即将开始';
                        statusClass = 'upcoming';
                    } else if (now >= startTime && now < endTime) {
                        status = '正在进行';
                        statusClass = 'ongoing';
                    } else {
                        status = '已结束';
                        statusClass = 'ended';
                    }
                    
                    // 确定显示的价格
                    let priceLabel, priceValue;
                    if (now < startTime) {
                        priceLabel = '起拍价';
                        priceValue = product.startPrice;
                    } else {
                        priceLabel = '当前价';
                        priceValue = product.currentPrice;
                    }
                    
                    // 确定显示的时间
                    let timeText;
                    if (now < startTime) {
                        timeText = formatTimeLeft(startTime);
                    } else if (now < endTime) {
                        timeText = formatTimeLeft(endTime);
                    } else {
                        timeText = '已结束';
                    }
                    
                    card = `
                        <div class="product-card auction" onclick="location.href='auction-detail.html?id=${product.auctionId}'">
                            <div class="auction-badge ${statusClass}">${status}</div>
                            <img src="${mainImage}" alt="${product.name}" class="product-image">
                            <div class="product-info">
                                <div class="product-name">${product.name}</div>
                                <div class="auction-price">
                                    <span class="label">${priceLabel}</span>
                                    <span class="price">¥${priceValue.toFixed(2)}</span>
                                </div>
                                <div class="product-meta">
                                    <div class="seller-info">
                                        <img src="${product.sellerAvatar || 'img/default-avatar.png'}" class="seller-avatar">
                                        <span>${product.sellerNickname}</span>
                                    </div>
                                    <div class="auction-time">
                                        <i class="fas fa-clock"></i>
                                        <span>${timeText}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                } else {
                    // 闲置商品卡片
                    card = `
                        <div class="product-card" onclick="location.href='product-detail.html?id=${product.id}'">
                            <img src="${mainImage}" alt="${product.name}" class="product-image">
                            <div class="product-info">
                                <div class="product-name">${product.name}</div>
                                <div class="product-price">¥${product.price.toFixed(2)}</div>
                                <div class="product-meta">
                                    <div class="seller-info">
                                        <img src="${product.sellerAvatar || 'img/default-avatar.png'}" class="seller-avatar">
                                        <span>${product.sellerNickname}</span>
                                    </div>
                                    <div class="condition-info">
                                        <span>${getConditionText(product.conditionLevel)}</span>
                                        <span class="view-count"><i class="fas fa-eye"></i> ${product.viewCount || 0}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                }
                grid.append(card);
            });
        }

        // 格式化剩余时间
        function formatTimeLeft(endTime) {
            const now = new Date();
            if (endTime < now) {
                return '已结束';
            }
            
            const diff = endTime - now;
            const days = Math.floor(diff / (1000 * 60 * 60 * 24));
            const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
            
            if (days > 0) {
                return `${days}天${hours}小时`;
            } else if (hours > 0) {
                return `${hours}小时${minutes}分`;
            } else {
                return `${minutes}分钟`;
            }
        }

        // 显示空状态
        function showEmptyState() {
            const grid = $('#productGrid');
            grid.html(`
                <div class="empty-state">
                    <i class="fas fa-box-open"></i>
                    <p>暂无相关商品</p>
                </div>
            `);
            $('#totalCount').text(0);
        }

        // 获取商品新旧程度文本
        function getConditionText(level) {
            const conditions = {
                5: '全新',
                4: '几乎全新',
                3: '轻微使用',
                2: '明显使用',
                1: '重度使用'
            };
            return conditions[level] || '未知';
        }

        // 绑定筛选事件
        function bindFilterEvents() {
            // 分类筛选
            $('#categoryOptions').on('click', '.filter-option', function() {
                $(this).siblings().removeClass('active');
                $(this).addClass('active');
                if ($(this).data('category') !== '') {
                    currentFilters.categoryPath = $(this).data('category');
                }
                loadProducts();
            });

            // 新旧程度筛选
            $('.filter-options').on('click', '.filter-option[data-condition]', function() {
                $(this).siblings('[data-condition]').removeClass('active');
                $(this).toggleClass('active');
                currentFilters.condition = $(this).hasClass('active') ? $(this).data('condition') : '';
                loadProducts();
            });

            // 价格区间筛选
            $('.filter-options').on('click', '.filter-option[data-price]', function() {
                $(this).siblings('[data-price]').removeClass('active');
                $(this).toggleClass('active');
                currentFilters.priceRange = $(this).hasClass('active') ? $(this).data('price') : '';
                loadProducts();
            });

            // 排��方式
            $('.sort-options').on('click', '.sort-option', function() {
                $(this).siblings().removeClass('active');
                $(this).addClass('active');
                currentFilters.sort = $(this).data('sort');
                loadProducts();
            });
        }
    </script>
</body>
</html> 